<template>
  <div class="ScrollChartContent">
    <!-- <div class="ScrollChartTlt">门店实时销售轮播</div> -->
    <img class="ScrollChartTlt" src="../../assets/img/storetltImg.png" alt="">
    <div class="ScrollChartcont">
      <div class="msgtitle backgroundimg">
        <span class="msgSpanTitle">门店</span>
        <span class="msgSpanTitle">用户</span>
        <span class="msgSpanTitle">时间</span>
        <span class="msgSpanTitle">金额</span>
      </div>
      <div class="msgScroll">
        <vueSeamlessScroll ref="msgListRefs" :data="cashierOrderList" :class-option="classOption">
          <div v-for="(item,index) in cashierOrderList" :key="index" class="msgScrollItem backgroundimg">
            <span class="msgSpanItem">{{ item.storeName }}</span>
            <span class="msgSpanItem">{{ item.memberName }}</span>
            <span class="msgSpanItem">{{ item.day }}</span>
            <span class="msgSpanItem">{{ item.receivableMoney }}</span>
          </div>
        </vueSeamlessScroll>
      </div>
    </div>
  </div>
</template>

<script>
// import { getScreenToken } from '@/api/user'
// import { rsaDecrypt } from '@/utils/commonutils3'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: 'ScrollChart',
  components: {
    vueSeamlessScroll
  },
  props: {
    cashierOrderList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      msgList: [{
        storeName: '裕酷',
        user: '6057',
        time: '12-26-12:00',
        money: '156.65'
      }, {
        storeName: '裕酷',
        user: '6057',
        time: '12-26-12:00',
        money: '156.65'
      }, {
        storeName: '裕酷',
        user: '6057',
        time: '12-26-12:00',
        money: '156.65'
      }, {
        storeName: '裕酷',
        user: '6057',
        time: '12-26-12:00',
        money: '156.65'
      }, {
        storeName: '裕酷',
        user: '6057',
        time: '12-26-12:00',
        money: '156.65'
      }, {
        storeName: '裕酷',
        user: '6057',
        time: '12-26-12:00',
        money: '156.65'
      }, {
        storeName: '裕酷',
        user: '6057',
        time: '12-26-12:00',
        money: '156.65'
      }, {
        storeName: '裕酷',
        user: '6057',
        time: '12-26-12:00',
        money: '156.65'
      }, {
        storeName: '裕酷',
        user: '6057',
        time: '12-26-12:00',
        money: '156.65'
      }, {
        storeName: '裕酷',
        user: '6057',
        time: '12-26-12:00',
        money: '156.65'
      }],
      classOption: {
        step: 0.5,
        limitMoveNum: 8,
        openWatch: true
      }
    }
  },
  created() {

  },
  methods: {
    reset() {
      this.$refs.msgListRefs.reset()
      console.log('reset了')
    }
  }
}
</script>

<style scoped lang="scss"
>
.ScrollChartContent{
  // padding: .1563rem;
  .ScrollChartTlt{
   width: 2.4948rem;
   height: .3125rem;
   margin-bottom: .1042rem;
  }
  .ScrollChartcont{
    overflow: hidden;
    height: 2.4531rem;
    // margin: 0 .1042rem;
    width: 2.6563rem;

    .msgtitle{
      width: 2.5521rem;
      height: .2865rem;
      // background: RGBA(16, 41, 88, 1);
      background-image: url(../../assets/img/Rectangle.png);
      line-height: .2865rem;
      display: flex;
      // overflow: hidden;
      .msgSpanTitle{
        width: 25%;
        font-family: PingFang SC, PingFang SC;
        font-size: .0833rem;
        text-align: center;
        font-weight: bold;
        color: #FFFFFF;
      }
    }
    .msgScroll{
      height: 2.4219rem;
      width: 2.5521rem;
      overflow: hidden;
      .msgScrollItem{
        height: .2708rem;
        display: flex;
        background-image: url(../../assets/img/itemBgImg.png);
        // height: ;
        .msgSpanItem{
          width: 25%;
          text-align: center;
          line-height: .2552rem;
          font-size: .0833rem;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          color: rgba(255,255,255,0.9);
        }
      }
    }
  }
}
.backgroundimg {
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  // background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
}
</style>
